<template>
  <div class="header_time">
    {{ currentTime }}
  </div>
</template>

<script setup name="Header">
import { ref } from 'vue';

const currentTime = ref('')

function updateTime() {
  function formatTime(time) {
    return time < 10 ? `0${time}` : time
  }
  const now = new Date()
  const year = now.getFullYear()  //年
  const month = now.getMonth() + 1 //月
  const day = now.getDate()    //日
  const hours = now.getHours()  //小时数
  const minutes = now.getMinutes()  //分钟数
  const seconds = now.getSeconds()  //秒数
  const week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()]  //星期
  //想展示什么  对应的展示即可 
  currentTime.value = `${year}-${formatTime(month)}-${formatTime(day)} ${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)} ${week}`
}


onMounted(() => {
  updateTime();
  const intervalId = setInterval(updateTime, 1000);
  // 将 intervalId 保存起来，以便在组件卸载时清除定时器
  window['intervalId'] = intervalId;
})


onUnmounted(() => {
  if (window['intervalId']) {
    clearInterval(window['intervalId']);
  }
});



</script>

<style lang='scss' scoped>
.header_time{
  display: flex;
  height: 124px;
  justify-content: flex-end;
  align-items: center;
  color: #fff;
  font-size: 20px;
  padding-right: 20px;
}

</style>